<template>
    <div>
        <!-- 描述课题基本信息的区域 -->
        <section>
            <el-descriptions class="margin_top" title="课题基本信息" :column="3" size="large" border>
                <el-descriptions-item label="课题ID">
                    {{ currentInfo.id }}
                </el-descriptions-item>
                <el-descriptions-item label="课题标题">
                    {{ currentInfo.title }}
                </el-descriptions-item>
                <el-descriptions-item label="当前状态">
                    {{ transformStatus(currentInfo.status!) }}
                </el-descriptions-item>
                <el-descriptions-item label="负责人">
                    <el-tag type="primary">
                        {{ (currentInfo.chairman as User).name }}
                    </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="成员">
                    <div class="tag_container">
                        <el-tag size="small" v-for="item in currentInfo.mamberArr" :key="item.id">
                            {{ item.name }}
                        </el-tag>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="相关标签">
                    <div class="tag_container">
                        <el-tag size="small" v-for="item in currentInfo.tagArr" :key="item.id">
                            {{ item.name }}
                        </el-tag>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="简介">
                    {{ currentInfo.remark }}
                </el-descriptions-item>
            </el-descriptions>
        </section>

        <!-- 课题进度区域 -->
        <section>
            <div class="title">课题进度信息</div>
            <el-button type="primary" @click="uploadLog" v-if="subjectStore.currentInfo.status === 0" v-authority="2">
                上传日志
            </el-button>
            <el-steps
                :active="currentInfo.schedule"
                align-center
                process-status="finish"
                finish-status="success"
                space="25%"
            >
                <el-step v-for="step in scheduleArr" :key="step.schedule" :title="step.title">
                    <template #description>
                        <div>
                            <!-- 只有课题进度已经提交过了的才有该按钮 -->
                            <el-button
                                type="primary"
                                size="small"
                                @click="goScheduleDetail(step.schedule)"
                                v-if="(currentInfo.schedule as number) >= step.schedule"
                            >
                                点击查看进度详情
                            </el-button>
                            <el-button
                                type="primary"
                                size="small"
                                @click="uploadWork(step.schedule)"
                                v-if="
                                    (currentInfo.schedule as number) + 1 === step.schedule &&
                                    subjectStore.currentInfo.status === 0
                                "
                                v-authority="0"
                            >
                                提交该任务
                            </el-button>
                        </div>
                    </template>
                </el-step>
            </el-steps>
            <schedule-detail :schedule="activeSchedule" v-model="visible"></schedule-detail>
        </section>

        <!-- 日志提交记录信息 -->
        <section v-if="subjectStore.authority !== -1">
            <log-container></log-container>
        </section>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import useSubjectStore from "@/store/modules/subject";
import { storeToRefs } from "pinia";
import { SubjectStatus, SubjectStatusText } from "@/constants/subjectStatus";
// 引入组件
import { defineAsyncComponent } from "vue";
const LogContainer = defineAsyncComponent(() => import("./logContainer.vue"));
const scheduleDetail = defineAsyncComponent(() => import("./scheduleDetail.vue"));
// 获取课题仓库
const subjectStore = useSubjectStore();
const { currentInfo } = storeToRefs(subjectStore);
// 改变状态内容
const transformStatus = (status: number) => {
    return (SubjectStatusText as { [key: string]: string | number })[SubjectStatus[status]];
};
// 进度条模块
const scheduleArr = [
    {
        schedule: 1,
        title: "提交开题报告",
    },
    {
        schedule: 2,
        title: "提交任务书",
    },
    {
        schedule: 3,
        title: "提交中期检查",
    },
    {
        schedule: 4,
        title: "提交结题报告",
    },
];

// 点击上传日志按钮
const uploadLog = () => {
    subjectStore.addUploadLogPage(); // 添加上传日志的界面
};
// 点击提交任务按钮
const uploadWork = (schedule: number) => {
    subjectStore.addUploadWorkPage(schedule); // 添加上传进度的页面
};

// 控制进度详情的标识符
const visible = ref(false);
const activeSchedule = ref(-1);
// 查看进度详情
const goScheduleDetail = (schedule: number) => {
    activeSchedule.value = schedule;
    visible.value = true;
};
</script>

<style lang="scss" scoped>
// 描述列表的样式
.el-descriptions {
    margin-top: 20px;
    .cell-item {
        display: flex;
        align-items: center;
    }

    .tag_container {
        display: flex;
        gap: 5px 5px;
    }
}

.margin_top {
    margin-top: 20px;
}

section:not(:first-child) {
    margin-top: 30px;

    // 模拟descriptions中header的样式
    .title {
        font-size: 16px;
        font-weight: 700;
        color: var(--el-text-color-primary);
        margin-bottom: 20px;
    }

    .log_container {
        display: flex;
        flex-wrap: wrap;

        margin-bottom: 30px;
    }
}
</style>
